<template>
  <div class="user-detail-box">
    <el-row
      v-for="(row,index) in detailList"
      :key="index"
      class="detail-row"
    >
      <el-col
        v-for="col in row"
        :key="col.key"
        :span="col.rowSpan"
      >
        <span class="detail-col-left">{{ col.lable }}</span>
        <span>{{ getLabel(col) }}</span>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  name: 'OperateDetail',
  props: {
    // 弹窗数据
    popData: {
      type: Object,
      default: () => ({})
    },
    // 弹窗配置
    popConfig: {
      type: Object,
      default: () => ({})
    },
    // 弹窗取消
    close: {
      type: Boolean,
      default: false
    },
    // 弹窗确认
    confirm: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formLoading: false,
      formData: {
        operationTm: '',
        loginName: '',
        operationEvent: '',
        url: '',
        ip: '',
        costTm: '',
        device: '',
        outParams: '',
        userAgent: ''
      },
      // 详情列表信息
      detailList: [
        [
          { rowSpan: 10, lable: '操作人员：', key: 'loginName' },
          { rowSpan: 10, lable: 'IP: ', key: 'ip' }
        ],
        [
          { rowSpan: 10, lable: '操作事件: ', key: 'operationEvent' },
          { rowSpan: 10, lable: 'URL: ', key: 'url' }
        ],
        [
          { rowSpan: 10, lable: '操作时间：', key: 'operationTm' },
          { rowSpan: 10, lable: '耗时：', key: 'costTm' }
        ],
        [
          { rowSpan: 10, lable: '设备：', key: 'device' },
          { rowSpan: 10, lable: '请求方式：', key: 'mode' }
        ],
        [{ lable: '环境: ', key: 'userAgent' }],
        [{ lable: '请求参数：', key: 'inParams' }],
        [{ lable: '请求地址：', key: 'method' }],
        [{ lable: '返回结果: ', key: 'outParams' }]
      ],
      // 详情数据
      detailData: {}
    }
  },
  computed: {
    handleDisabled() {
      return (item) => {
        if (item.prop === 'passwordConfirm') {
          return !this.formData.password
        }
        return false
      }
    }
  },
  watch: {
    popData: {
      handler(data) {
        if (data) {
          this.getDetailData({ id: data.id })
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    /**
     * 获取lebel对应值
     * @param col 行数据
    */
    getLabel(col) {
      const { detailData } = this
      return detailData[col.key]
    },
    /**
     * 获取详情数据
    */
    getDetailData(params) {
      this.$api.operateLog.getOperationLogDetail(params).then(res => {
        const { code, data } = res
        if (Number(code) === 1000 && data) {
          const arr = Object.keys(data)
          arr.forEach(key => {
            if (!data[key]) {
              data[key] = '--'
            }
          })
          this.detailData = data
        } else if (res.msg) {
          this.$message({ type: 'error', message: res.msg })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.user-detail-box {
  color: #333;
  padding: 0 20px;

  .detail-row {
    padding: 5px 0;
  }

  .detail-col-left {
    font-weight: bold;
    display: inline-block;
    margin-right: 14px;
  }
}
</style>
